<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './MyTable.vue'

export interface User {
  id: number
  name: string
  age: number
}

const list = ref([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])

const list2 = ref([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])

const del = (id:number) => {
  list2.value = list2.value.filter(item => item.id !== id)
}

let isEdit = ref(0)



</script>

<template>
  <MyTable :data="list" :is-edit="isEdit">
    <template #btn="{ id,data}">
      <button @click="isEdit = isEdit ? 0 : id">
        {{  isEdit == id ? '完成' : '编辑' }}
      </button>
    </template>
  </MyTable>
  <MyTable :data="list2" :is-edit="0">
    <template #btn="v">
      <button @click="del(v.id)">
        删除
      </button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}

.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
.my-table button:hover {
  background-color: #f5f5f5;
}
</style>